<template>
  <div>
    <!-- 第一行 -->
    <div v-if="detailFlag">
      <el-row>
        <el-col :span="3" tag="span">
          入库单详情页 <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="1.5" :offset="13">
          <el-button @click="pre">上一页</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="next">下一页</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="verify">审核</el-button>
        </el-col>
        <el-col :span="1.5" >
          <el-button @click="fail">驳回</el-button>
        </el-col>

        <el-col :span="1.5" >
          <el-button @click="closeDetail">关闭</el-button>
        </el-col>
      </el-row>
<!-- 显示详细信息 -->
      <el-row>基本信息 <el-divider direction="vertical"></el-divider></el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
          <span class="detail_span">入库编号:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.rkNo" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">商品编号:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.goodsid" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">客户:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.custom" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="2" :offset="1">
          <span class="detail_span">商品种类:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.category" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">入库来源:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.rkType" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">状态:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.status" :disabled="true" ></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">产品名字:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.name" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">产品模型:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.productModel" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">成色:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.percenttage" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">区域:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.location" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">仓库:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.repositoryNo" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">类型:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.type" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">条码:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.barCode" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">重量:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.weight" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">数量:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.nums" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">加工费:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.processingFee" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">提单人:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.makePerson" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">提单时间:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.makeTime" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">审核人:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.verfyPerson" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">审核时间:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.verifyTime" :disabled="true"></el-input>
        </el-col>

      </el-row>




      <el-divider></el-divider>
    </div>



<!-- 查询条件 -->

    <el-row>
      <el-col :span="2.5" >
        <el-cascader
          v-model="value"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"></el-cascader>
      </el-col>
      <el-col :span="2.5">
        <router-link to="/menu/add_rk" tag="span">
          <el-button icon="el-icon-plus">
              新增入库
          </el-button>
         </router-link>
      </el-col>
      <el-col :span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>

      <el-col :span="6" :offset="1">
        <el-date-picker
          v-model="date"
          @blur="searchDate"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-col>

      <el-col :span="4" :offset="1">
        <el-input v-model="input" placeholder="请输入入库单号"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>

      </el-col>
      <el-col :span="1.5" >
        <el-button circle icon="el-icon-delete-solid" @click="deleteParam"></el-button>
        <el-button circle icon="el-icon-refresh" @click="refresh"></el-button>

      </el-col>
    </el-row><br>










<!-- 表格 -->
     <el-table
     :key="refreshKey"
    :data="tableData"
    ref="singleTable"
    header-align
    highlight-current-row
    @current-change="handleCurrentChange"
    @row-click="rowClick"
    :row-class-name="rowClassName"
    style="width: 100%">
    <el-table-column
      header-align="center"
      align="center"
      type="index"
      width="80">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="rkNo"
      label="入库编号"
      width="180">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="custom"
      label="客户"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="category"
      label="商品种类"
      :formatter="categoryFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="rkType"
      label="入库来源"
      :formatter="rkTypeFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="status"
      label="状态"
      :formatter="statusFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="name"
      label="产品名字"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="repositoryNo"
      label="仓库"
      width="160">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="weight"
      label="重量"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="nums"
      label="数量"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="makePerson"
      label="提单人"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="verfyPerson"
      label="审核人"
      width="120">
    </el-table-column>

  </el-table>
  <!-- 分页 -->

  <el-pagination
    @size-change="handleSizeChangeA"
    @current-change="handleCurrentChangeA"
    :current-page="1"
    :page-sizes="[10, 20, 30]"
    :page-size="sizeEveryPage"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>



  </div>

</template>

<script>
export default {
  data() {
    return {
      value:["",""],
      options:[
        {
          value:"rkType",
          label:"入库来源",
          children:[]
        },
        {
          value:"status",
          label:"状态",
          children:[]
        },
        {
          value:"category",
          label:"商品种类",
          children:[]
        }
      ],
      refreshKey:0,
      input:"",
      date:["null","null"],
      tableData: [],
      sizeEveryPage:10,
      pageNum:1,
      total:null,
      rowData:null,
      detailFlag:false,
      index:"",
    }
  },

  methods:{
    //审核
    verify(){
      if(this.rowData.status != "1"){
        this.$message.error("当前表不能审核~");
        return;
      }else{
        //alert("去审核");
        this.$confirm('确定提交吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.rowData.verfyPerson = this.$store.state.grades.account;
          //console.log(this.rowData);
          this.axios({
            method:'post',
            url:this.baseUrl+'rkTable/verify',
            data:JSON.stringify(this.rowData),
            headers:{
              "Content-Type": "application/json; charset=UTF-8"
            }
          }).then(res=>{
            console.log(res.data);
            if(res.data.status == "PERMS_NO"){
              this.$message.error(res.data.message);
            }else{
              if(res.data.status == 'SYSTEM_BUSY'){
                this.$message.error(res.data.message);
              }else{
                //console.log(this.rowData);
                //console.log(res.data.data);

                this.rowData = res.data.data;
                this.tableData[this.index] = this.rowData;
                this.$message({
                  message:"审核成功~",
                  type:'success'
                });
                this.refreshKey++;//重新渲染数据
              }
            }
            
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });

      }

    },
    //驳回
    fail(){
      if(this.rowData.status != '4'){
        this.$confirm('确定提交吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios({
            method:'post',
            url:this.baseUrl+'rkTable/fail',
            data:JSON.stringify(this.rowData),
            headers:{
              "Content-Type": "application/json; charset=UTF-8"
            }
          }).then(res=>{
            if(res.data.status == 'SYSTEM_BUSY'){
              this.$message.error(res.data.message);
            }else{
              this.rowData = res.data.data;
              this.tableData[this.index] = this.rowData;
              this.$message({
                message:"成功驳回~",
                type:'success'
              });
              this.refreshKey++;//重新渲染数据
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }else{
        this.$message({
          message:"该表单已经失效了~",
          type:'warning'
        });
      }
    },
    //上一页
    pre(){
      if(this.index === 0){
        this.$message.error("已经是第一页了~");
        return;
      }
      this.index = this.index-1;
      this.rowData = this.tableData[this.index];

      //高亮显示用
      this.$refs.singleTable.setCurrentRow(this.tableData[this.index]);
    },
    //下一页
    next(){
      if((this.index === this.sizeEveryPage-1) || this.index === this.total-1){
        this.$message.error("已经是最后一页了~");
        return;
      }
      this.index = this.index+1;
      this.rowData = this.tableData[this.index];
      this.$refs.singleTable.setCurrentRow(this.tableData[this.index]);
    },
    //将行索引放进row
    rowClassName({row,rowIndex}){
      row.index = rowIndex;
    },
    //关闭详细信息
    closeDetail(){
      console.log(this.detailFlag);
      this.detailFlag = false;
    },
    //显示点击行的详细信息
    rowClick(row){
      this.rowData = this.tableData[row.index];
      this.index = row.index;
      this.detailFlag = true;
    },
    //清空参数
    deleteParam(){
      this.date=["null","null"],
      this.value=["",""],
      this.sizeEveryPage=10,
      this.pageNum=1,
      this.detailFlag = false;
      this.input="";
    },
    //筛选列表
    handleChange(value) {
        //console.log(value);

        this.selectByPage();

    },
    //刷新
    refresh(){

      this.selectByPage();
    },
    search(){
      if(this.input == ""){
        this.$message.error("请输入查询信息")
        return;
      }
      this.detailFlag = false;
      //按输入入库编号查
      //alert(this.date);
      this.axios({
        method:"get",
        url:this.baseUrl+"rkTable/findByRkNo",
        params:{
          rkNo:this.input
        }
      }).then(res=>{
        console.log(res.data.data);
        this.tableData = res.data.data;
        this.total = null;
      })
    },
    searchDate(){

      //按时间查询
      this.selectByPage();
    },

    //分页
    //按每页显示条数查
    handleSizeChangeA(val) {

      this.sizeEveryPage = val;
      //console.log(this.sizeEveryPage);
      this.selectByPage();
    },
    //按页码查
    handleCurrentChangeA(val) {

      this.pageNum = val;
      //console.log(this.pageNum);
      this.selectByPage();
    },

    //转换信息的显示
    statusFormatter(val){
      //console.log(val.status);
      if(val.status == '1'){
        return "未审核";
      }else if(val.status == '2'){
        return "进行中";
      }else if(val.status == '3'){
        return "成功";
      }else{
        return '失败';
      }
    },
    categoryFormatter(val){
      if(val.category == '1'){
        return "黄金";
      }else if(val.category == '2'){
        return "铂金";
      }else if(val.category == '3'){
        return "钻石";
      }else if(val.category == '4'){
        return "宝玉";
      }
    },
    rkTypeFormatter(val){
      if(val.rkType == '1'){
        return '采购入库';
      }else if(val.rkType == '2'){
        return '销售退货';
      }else if(val.rkType == '3'){
        return "调拨入库";
      }
    },
    handleCurrentChange(val) {
        this.rowData = val;
    },
    //分页查询方法
    selectByPage(){
      this.detailFlag = false;
      this.axios({
        method:"get",
        url:this.baseUrl+"rkTable/selectByPage",
        params:{
          dateStart:this.date[0],
          dateEnd:this.date[1],
          selectType:this.value[0],
          selectId:this.value[1],
          page:this.pageNum,
          nums:this.sizeEveryPage
        }
      }).then(res=>{
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },

 

  },
  created(){
    //查询入库表
    this.axios({
      method:'get',
      url:this.baseUrl+"rkTable/selectByPage",
      params:{
        dateStart:"null",
        dateEnd:"null",
        selectType:"",
        selectId:"",
        page:1,
        nums:10
      }
    }).then(res=>{
      //let data = res.data.data.list;

      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
      console.log(res);
    }),
    //
    //查询筛选项
    this.axios({
      method:"get",
      url:this.baseUrl+"rkTable/findCategory",
    }).then(res=>{
      for (const cate of res.data.data) {
        //console.log(index);
        let temp = {"value":cate.id,"label":cate.type}
        this.options[2].children.push(temp);
      }
    }),
    this.axios({
      method:"get",
      url:this.baseUrl+"rkTable/findStatus",
    }).then(res=>{
      for (const cate of res.data.data) {
        let temp = {"value":cate.id,"label":cate.type}
        this.options[1].children.push(temp);
      }
    }),
    this.axios({
      method:"get",
      url:this.baseUrl+"rkTable/findRkType",
    }).then(res=>{
      for (const cate of res.data.data) {
        let temp = {"value":cate.id,"label":cate.rkType}
        this.options[0].children.push(temp);
      }
    })

  }
}
</script>

<style scoped>

</style>
